<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="shortcut icon" href="/GlimmerIco.ico">
		<link rel="stylesheet" href="/stylesheets/imitate.css" />
	</head>
	<body>
		<div id="app" class="parent">
			<div class="div1-title">
				<div class="div1-title-div1">
					<span v-if="!Simulate.login" class="login">
						<p><input type="text" v-model="Simulate.username" placeholder="请输入账户" /></p>
						<p><input type="text" v-model="Simulate.password" placeholder="请输入密码" /></p>
						<button class="min-button" @click="login">登录</button>
					</span>
					<span v-else>
						<p>账户昵称:{{Simulate.user.nickname}} &emsp;账户名称:{{Simulate.user.username}}</p>
						<p>账户ID:{{Simulate.user._id}}</p>
						<button class="line-button" @click="showRoomList">查看房间列表</button>&emsp;
						<button class="line-button" @click="showFriendList">查看好友列表</button>
						<p v-if="Simulate.socketOnline">socket与用户信息已绑定</p>
						<p v-else>socket与用户信息未绑定</p>
					</span>
				</div>
				<div class="div1-title-div2">
					<img class="logo" src="/GlimmerIco.ico" />GlimmerLI.
					<b
						:style="'color:'+connectState.color[connectState.State]">{{connectState.Text[connectState.State] }}</b>
				</div>
			</div>
			<div class="div2-config">
				<!-- 配置列表 -->
				<div class="div2-config-div1">房间列表:<br><br>发送者id:</div>
				<div class="div2-config-div2">接收者id:<br><br></div>
				<div class="div2-config-div3">
					发送事件:
				</div>
				<div class="div2-config-div4">
					发送模板:<br>
					<br>
					<span v-if="Sindex == -1">
						<button class="min-button" @click="save">保存</button>
					</span>
				</div>
				<div class="div2-config-div5">
					发送数据:<br>
				</div>
				<div class="div2-config-div6"></div>
				<div class="div2-config-div7">
					<p v-for="item in connectState.consoleMessage">
						{{item}}
					</p>
				</div>
				<div class="div2-config-div9">
					<select name="room" v-model="sendSet.room">
						<option v-for="(item,index) in sendState.roomlist" :value="item.RoomId">
							{{item.RoomName}}:({{item.RoomId}})
						</option>
					</select>
					<input type="text" placeholder="发送名称" v-model="sendSet.sendID" />
				</div>
				<div class="div2-config-div10">
					<input type="text" placeholder="接收者id" v-model="sendSet.receiveID" />
				</div>
				<div class="div2-config-div11">
					<!-- 循环后端传来的选项对象 -->
					<select v-model="sendSet.sendType">
						<option v-for="(event,index) in sendState.eventList" :value="event">
							{{event}}
						</option>
					</select>
				</div>
				<div class="div2-config-div12">
					<select id="Stemplate" name="Stemplate" v-model="Sindex">
						<option v-for="(item,index) in Stemplate" :value="index">
							{{item.name}}
						</option>
						<option :value="-1">
							保存模板
						</option>
					</select>
					<input v-if="Sindex == -1" type="text" v-model="sendSet.name" />
				</div>
				<div class="div2-config-div14">
					<button id="send" @click="send">发送数据</button>
					<button id="dis" @click="close">断开连接</button>
					<button id="again" @click="again">重新连接</button>
				</div>
				<div class="div2-config-div15">
					<textarea placeholder="发送数据" v-model="sendSet.message"></textarea>
				</div>
			</div>
			<!-- 接收列表 -->
			<div class="div3-send">
				<div class="div3-send-div1"> 发送列表({{sendState.SendMessageList.length}})</div>
				<div class="div3-send-div2">
					<div v-for="unit in sendState.SendMessageList" class="chat-message-container">
						<div class="chat-message-header">
							<span class="send-time">发送时间:{{unit.getTime()||'未知'}}</span>
							<span class="send-time">
								<button class="min-button" @click="unit.flagShow = !unit.flagShow">切换</button>
								<button class="min-button" @click="unit.send()">重发</button>
							</span>
						</div>
						<div class="chat-message-header">
							<span class="sender-name">发送者名称:{{unit.sendID||'未知'}}</span>
						</div>
						<div class="chat-message-header">
							<span class="sender-name">接收者名称:{{unit.receiveID||'未知'}}</span>
						</div>
						<div class="chat-message-header">
							<span class="sender-name">房间名称:{{unit.room||'未知'}}</span>
						</div>
						<div class="chat-message-header">
							<span class="send-type">发送次数:{{unit.sendNum||'未知'}}</span>
							<span class="send-type">响应状态:<span v-html="unit.getStatus()"> </span></span>
						</div>
						<div class="room-receiver-info">
							<span class="send-type">发送类型:{{unit.sendType||'未知'}}</span>
						</div>
						<template v-if="unit.flagShow">
							<div class="message-content">
								{{unit.message||'未知'}}
							</div>
						</template>
						<template v-else>
							<div class="message-content">
								<dl>
									<template v-for="(value,key) in unit">
										<dt>键{{key}}:</dt>
										<dd>{{value}}</dd>
									</template>
								</dl>
							</div>
						</template>
					</div>
				</div>
			</div>
			<!-- 发送列表 -->
			<div class="div4-receive">
				<div class="div4-receive-div1">接收列表({{sendState.ReceiveMessageList.length}})</div>
				<div class="div4-receive-div2">
					<div v-for="unit in sendState.ReceiveMessageList" class="chat-message-container">

						<div class="chat-message-header">
							<span class="send-time">接收时间:{{unit.getTime()||'未知'}}</span>
							<span class="send-time">
								<button class="min-button" @click="unit.flagShow = !unit.flagShow">切换</button>
							</span>
						</div>
						<div class="chat-message-header">
							<span class="sender-name">发送者名称:{{unit.sendID||'未知'}}</span>
						</div>
						<div class="chat-message-header">
							<span class="sender-name">接收者名称:{{unit.receiveID||'未知'}}</span>
						</div>
						<div class="chat-message-header">
							<span class="send-type">房间名称:{{unit.room||'未知'}}</span>
						</div>
						<div class="chat-message-header">
							<span class="send-type">发送类型:{{unit.sendType||'未知'}}</span>
						</div>
						<template v-if="unit.flagShow">
							<div class="message-content">
								{{unit.message||'未知'}}
							</div>
						</template>
						<template v-else>
							<div class="message-content">
								<dl>
									<template v-for="(value,key) in unit">
										<dt>键{{key}}:</dt>
										<dd>{{value}}</dd>
									</template>
								</dl>
							</div>
						</template>
					</div>
				</div>
			</div>
		</div>


	</body>
	<script src="/plug/axios.min.js"></script>
	<script src="/plug/socket.io.min.js"></script>
	<script type="module" src="/javascripts/imitate.js"></script>
</html>